<template>
  <div class="bg">
    <a-card title="注册" class="card">
      <a-form :model="formState" name="normal_login" class="login-form">
        <a-form-item
          label="用户名"
          name="username"
          :rules="[{ required: true, message: '用户名不能为空!' }]"
        >
          <a-input v-model:value="formState.username">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          label="密　码"
          name="password"
          :rules="[{ required: true, message: '密码不能为空!' }]"
        >
          <a-input-password v-model:value="formState.password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item>
          <a-button
            :disabled="disabled"
            type="primary"
            html-type="submit"
            class="login-form-button"
            @click="Register"
          >
            确定
          </a-button>
          <a-button type="primary" class="login-form-button" @click="Reset"
            >重置</a-button
          ><br />
          <a><RouterLink to="/login">返回登录</RouterLink></a>
        </a-form-item>
      </a-form>
    </a-card>
    <a-modal v-model:visible="visible" title="提示" @ok="handleOk">
      <p>用户添加成功,是否现在跳转登录?</p>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, reactive, computed, toRefs, ref } from 'vue'
import { message } from 'ant-design-vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import $api from '@/request/api'
export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
  },

  setup() {
    const router = useRouter()
    const formState = reactive({
      username: '',
      password: '',
    })
    const { username, password } = toRefs(formState)
    const visible = ref(false)
    const disabled = computed(() => {
      return !(formState.username && formState.password)
    })
    const Reset = () => {
      username.value = ''
      password.value = ''
    }
    const Register = () => {
      $api.registerUser(formState).then((res) => {
        const { code, msg } = res
        if (code == 202) {
          console.log(msg)
          visible.value = true
        } else if (code == 422) {
          message.info(msg)
        }
      })
    }
    const handleOk = () => {
      router.push({
        path: '/login',
      })
    }
    return {
      formState,
      visible,
      disabled,
      Reset,
      Register,
      handleOk,
    }
  },
})
</script>
<style scoped>
.bg {
  background-image: url('../img/city-magistral-doroga-dvizhenie-avtomobili-gorod-157738.jpeg');
  background-size: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
}
.bg:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.5);
  z-index: -1;
}
.card {
  width: 400px;
  border-radius: 12px;
  position: absolute;
  left: 37%;
  top: 20%;
}
.login-form {
  max-width: 300px;
}
.login-form-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login-form-forgot {
  margin-bottom: 24px;
}
.login-form-button {
  width: 45%;
  margin: 0 3px;
}
</style>
